<template>
  <div class="App">
    <!-- 自定义指令 ,将 dom操作封装到指令中 v-focus：页面加载完，自动聚焦到输入框 -->
    <input type="text" ref="inputD" v-fos />

    <span v-co="colors">自定义指令修改这段文字的颜色</span>
    <button v-on:click="chanCo">修改字体颜色</button>
  </div>
</template>

<script>
export default {
  // 使用自定义指令 v-focus代替下面的功能
  // mounted(){
  //   this.$refs.inputD.focus()
  // }
  data() {
    return {
      colors: "red",
    };
  },

  // 局部注册自定义指令
  directives: {
    // 指令名：指令的配置项
    fos: {
      // inserted 指令会在指令所在的元素，被插入到页面时触发
      inserted(el) {
        el.focus();
      },
    },

    co: {
      // 1. inserted 提供的元素被添加到页面中时被触发
      inserted(el, binding) {
        el.style.color = binding.value;
      },
      // binding.value 可以拿到指令值，指令值修改就会触发update函数
      update(el,binding){
        el.style.color = binding.value
      }
    },
  },
  methods:{
    chanCo(){
      console.log("修改字体颜色")
      this.colors = 'blue'
    }
  }
};
</script>

<style>
.ceshi {
  width: 300px;
  height: 300px;
}
</style>